<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">

        <el-form-item label="申诉单号">
          <el-input v-model="q.data_id" placeholder="申诉单号" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="网络状况：">
          <el-select v-model="q.net" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="item in net_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-select v-model="q.contact_type" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="item in contact_type_list" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人：">
          <el-select v-model="q.handler_id" clearable placeholder="请选择">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题状况：">
          <el-select v-model="q.status" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="item in status_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="Timetype" label="申诉时间:">
          <span style="color: blue; cursor:pointer;" @click="toggleTimetype">(点击切换) </span>
          <el-date-picker v-model="q.created_at_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item v-if="!Timetype" label="问题出现时间:">
          <span style="color: blue; cursor:pointer;" @click="toggleTimetype">(点击切换) </span>
          <el-date-picker v-model="q.appear_at_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.appear_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
          <el-button size="mini" @click="uploadLoginHelpData" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading" size="mini" stripe border
      fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="申诉单号" width="80">
      </el-table-column>
      <el-table-column prop="created_at" label="申诉时间" width="150">
      </el-table-column>
      <el-table-column prop="appear_at" label="问题出现时间" width="150">
      </el-table-column>
      <el-table-column prop="phone_model" label="机型" width="200">
        <template slot-scope="scope"><div class="ellipsis">{{scope.row.phone_model}}</div></template>
      </el-table-column>
      <el-table-column prop="net" label="网络状况" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.net === 0?'WIFI': scope.row.net === 1?'4G':scope.row.net === 2?'3G':'2G'}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="contact_type" label="联系方式">
        <template slot-scope="scope">
          <span>{{contactType[scope.row.contact_type]}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="contact_account" label="联系号码">
      </el-table-column>
      <el-table-column min-width="240" prop="desc" label="问题描述">
        <template slot-scope="scope"><div class="ellipsis">{{scope.row.desc}}</div></template>
      </el-table-column>
      <el-table-column v-if="false" width="100" prop="status" label="问题状态">
        <template slot-scope="scope">
          <span>{{scope.row.status === 0?'待处理': scope.row.status === 1?'处理中':'已处理'}}</span>
        </template>
      </el-table-column>
      <el-table-column width="210" prop="handler" label="操作人">
      </el-table-column>
      <el-table-column width="160" prop="updated_at" label="问题处理时间">
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button :type="scope.row.status === 0?'danger':scope.row.status === 1?'warning':'success'" size="mini" @click="Details(scope.row)">{{scope.row.status === 0?'待处理':scope.row.status === 1 ?'处理中':'已处理'}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr" :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="listData.total">
      </el-pagination>
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :problemsTypeList="problemsTypeList">
    </save-update>
    <!-- <transfer v-if="showTransfer" :showUpdate.sync="showTransfer" :id="show_id" :showTransfer="showTransfer"
      :typeId="typeId" :handlerId="handlerId"></transfer> -->
  </div>
</template>

<script>
import { getLoginHelpList, getuserList2, getProblemsList, uploadLoginHelpData } from '@/api'
import saveUpdate from './saveUpdate'
// import transfer from './transfer'
import { queryFilter } from '@/utils/patch'


export default {
  name: "index",
  components: { saveUpdate },
  data () {
    return {
      show_id: null,
      listData: {},
      // q: { page_size: 30, page_no: 1, pro_id: this.$store.state.user.userinfo.pro_id },
      q: {page_size: 30, page_no: 1},
      listLoading: false,
      showUpdate: false,
      problemsTypeList: [],
      Timetype: true,
      working: true,
      showTransfer: false,
      typeId: 0,
      handlerId: 0,
      userList: [],
      net_type: [{label: 'WIFI',value: 0},{label: '4G',value: 1},{label: '3G',value: 2},{label: '2G',value: 3}],
      contact_type_list: this.$store.state.app.contactType_,
      contactType: this.$store.state.app.contactType,
      status_list: [{label: '待处理',value: 0},{label: '处理中',value: 1},{label: '已处理',value: 2}]
    }
  },
  created () {
    this.getList()
    console.log(9090)
    this.getuserList()
    this.getProblemsList();
  },
  methods: {
    getProblemsList () {
      getProblemsList().then(res => {
        if (res.status === 0) {
          this.problemsTypeList = res.data.items
        }
      })
    },
    getuserList () {
      getuserList2().then(res => {
        if (res.status === 0) {
          this.userList = res.data
        }
      })
    },
    receiptWork (val) {
      //通过val值判断点击的是工作还是停止
      //如果是工作，working改为true。否则为false
      if (val === 'work') {
        this.working = true
      } else {
        this.working = false
      }
    },
    Details (row) {
      this.show_id = row.id
      this.showUpdate = true
    },
    sendMsg (row) {
      console.log(row)
    },
    query () {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30 })
      this.getList()
    },
    reload () {
      this.q = { page_no: 1, page_size: 30 }
      this.getList()
    },
    handleSizeChange (val) {
      this.q.page_size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.page_no = val
      this.getList()
    },
    Transfer (row) {
      this.show_id = row.id
      this.typeId = row.type_id
      this.handlerId = row.handler_id
      this.showTransfer = true
    },
    getList () {
      let queryObj = queryFilter(this.q)
      this.listLoading = true
      getLoginHelpList(queryObj).then(res => {
        if (res.status === 0) {
          console.log(res)
          // let m = new Set()
          this.listLoading = false
          this.listData = res.data
          // res.data.items.forEach(item => {
          //   m.add(item.handler)
          // })
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleSelectionChange (sel) {
      console.log(sel)
    },
    toggleTimetype () {
      if (this.Timetype) {
        delete this.q.created_at_begin
        delete this.q.created_at_end
        this.Timetype = !this.Timetype
      } else {
        delete this.q.updated_at_begin
        delete this.q.updated_at_end
        this.Timetype = !this.Timetype
      }
    },
    uploadLoginHelpData(){
      this.$confirm(`确认下载详情么？`, '下载详情', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.uploadData = Object.assign(this.q, {page_no: 1, page_size: 30})
        console.log(this.uploadData)
        uploadLoginHelpData(this.uploadData).then(res => {
          console.log(res, 'data', this.uploadData)
          if(res.status === 0&&res.data.url){
            window.location = res.data.url;
            this.$message({ type: 'success', message: '已成功导出' });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下载'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        })
      })
    },
  },
  watch: {
    showUpdate () {
      if(this.showUpdate!==0&&!this.showUpdate){
        this.getList()
      }
    },
    showTransfer () {
      if (!this.showTransfer) {
        this.getList()
      }
    }
  }
}
</script>

<style scoped>
.el-form-item__label {
  width: 100px !important;
}
</style>
